/*
 * @Author: Zhang Kai
 * @Date: 2022-03-30 14:18:26
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2022-04-22 15:40:07
 * @FilePath: /metricsx-standard-ui/src/components/CustomColumn/index.tsx
 */
import {
  defineComponent,
  onMounted,
  PropType,
  ref,
  TransitionGroup,
  watch
} from 'vue';
import '@/components/CustomColumn/index.scss';
import { VueDraggableNext } from 'vue-draggable-next';
import _ from 'lodash';
import drag from '@/assets/images/drag.svg';
import sequence from '@/assets/images/sequence.svg';
const CustomColumn = defineComponent({
  name: 'Pagination',
  components: {
    draggable: VueDraggableNext
  },
  props: {
    tableColumn: {
      type: Array,
      default: () => []
    }
  },
  emits: ['confirm'],
  setup: (props, { slots, attrs, emit }) => {
    const checkAll = ref(false);

    const isIndeterminate: any = ref();

    const checkedCities: any = ref([]);

    const popoverVisible: any = ref(false);

    const tableColumns: any = ref([]);

    onMounted(() => {});

    watch(
      () => popoverVisible.value,
      () => {
        tableColumns.value = _.cloneDeep(props?.tableColumn);
        checkedCities.value = tableColumns.value.filter((v: any) => v.isCheck);
        if (checkedCities.value.length) isIndeterminate.value = true;
      }
    );
    return () => {
      const { tableColumn } = props;
      return (
        <div class="CustomColumn">
          <el-popover
            visible={popoverVisible.value}
            placement="bottom-start"
            popper-class="CustomColumn-popover"
            width="228px"
            trigger="click"
            v-slots={{
              reference: () => (
                <div class="CustomColumn-button">
                  <el-button
                    onClick={() =>
                      (popoverVisible.value = !popoverVisible.value)
                    }
                    type="text"
                  >
                    <img src={sequence} alt="" />
                    <span>自定义列</span>
                  </el-button>
                </div>
              )
            }}
          >
            <div class="CustomColumn-list">
              {/* 全选 */}
              <el-checkbox
                v-model={checkAll.value}
                indeterminate={isIndeterminate.value}
                class="allCheck"
                onChange={(val: boolean) => {
                  tableColumns.value.forEach((v: any) => {
                    if (!v.disabled) v.isCheck = !!val;
                  });
                  checkedCities.value = tableColumns.value.filter(
                    (v: any) => v.isCheck
                  );
                  isIndeterminate.value = false;
                }}
              >
                全选
              </el-checkbox>

              <el-checkbox-group
                onChange={(val: any) => {
                  const checkedCount = val.length;
                  checkAll.value = checkedCount === tableColumns.value.length;
                  isIndeterminate.value =
                    checkedCount > 0 &&
                    checkedCount < tableColumns.value.length;
                }}
                v-model={checkedCities.value}
              >
                {/* 拖拽list */}
                <draggable
                  class="draggable-container"
                  list={tableColumns.value}
                >
                  {tableColumns.value?.map((v: any, i: number) => (
                    // <TransitionGroup key={i} name="fade">
                    <div class="draggable-list">
                      <el-checkbox
                        disabled={v.disabled}
                        onChange={(e: any) => (v.isCheck = e)}
                        label={v}
                      >
                        {v.label}
                      </el-checkbox>
                      <img src={drag} alt="" />
                    </div>
                    // </TransitionGroup>
                  ))}
                </draggable>
              </el-checkbox-group>

              {/* 操作底部 */}
              <div class="CustomColumn-footer">
                <el-button onClick={() => (popoverVisible.value = false)}>
                  取消
                </el-button>
                <el-button
                  type="primary"
                  onClick={() => {
                    popoverVisible.value = false;
                    emit('confirm', tableColumns.value);
                  }}
                >
                  确认
                </el-button>
              </div>
            </div>
          </el-popover>
        </div>
      );
    };
  }
});

export default CustomColumn;
